<template>
	<view class="content">
		<view class="index_search">
			<image src="../../static/index1.png"></image>
			<view class="s_input">
				<u-input></u-input>
			</view>
			<u-icon name="photo" color="#2979ff" size="50"></u-icon>
	
		</view>
		 <u-swiper class="myswiper"
		            :list="banner"
					  keyName="Cpic"
		    ></u-swiper>
			<!-- 好评榜 -->
			<list-com title="好评榜" :list="goodList"></list-com>
			<!-- 最新课程 -->
			<list-com title="最新课程" :list="newList"></list-com>
			<!-- 推荐课程 -->
			<list-com title="推荐课程" :list="chooseList"></list-com>
	</view>
</template>

<script>
	import {getHomeList} from '@/api/home.js'
	import listCom from './list.vue'
	export default {
		components:{listCom},
		data() {
			return {
				title: 'Hello',
				value2:"",
				bannerList:[],
				
				goodList:[],
				newList:[],//最新课程
				chooseList:[]//推荐课程

			}
		},
		onLoad() {
			getHomeList().then(res=>{
				console.log(res);
				this.bannerList=res.data.bannerList; //轮播图
				this.goodList=res.data.goodList; //好评榜
				this.newList=res.data.newList;//最新课程
				this.chooseList=res.data.chooseList;//推荐课程
				
			})
		},
		computed:{
			banner(){
					let arr=this.bannerList.map(item=>{
						item.Cpic="http://127.0.0.1:3000"+item.Cpic
						return item
					})
					return arr;
			}
		},
		methods: {
			change(){
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.index_search{
		width: 100vw;
		height: 70px;
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
		box-sizing: border-box;
		image{
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}
		.s_input{
			width: 220px;
			margin-top: 20px;
		}
	}
	.myswiper{
		width: 100vw;
		height: 220px;
	}
</style>
